$(function () {
  const layer = layui.layer;
  const form = layui.form;

  initCate();
  // 初始化富文本编辑器
  initEditor();
  // 定义加载文章分类的方法
  function initCate() {
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        let htmlStr = template("tpl-cate", res);
        $("[name=cate_id]").html(htmlStr);
        // 通知layui渲染 select下拉框
        form.render();
      }
    });
  }

  // 1. 初始化图片裁剪器
  var $image = $("#image");
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: ".img-preview"
  };
  // 3. 初始化裁剪区域
  $image.cropper(options);

  // 选择封面
  $(".btn-image").on("click", function () {
    // 开始让较丑的file表单隐藏 点击了美化后的按钮模拟点击了file表单
    $("#coverFile").click();
  });
  // 监听上传表单的change事件
  $("#coverFile").on("change", function () {
    let file = this.files[0];
    // 根据获取到的文件 创建url地址
    let newUrlImg = URL.createObjectURL(file);
    // 为裁剪区域重新设置图片
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", newUrlImg) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });

  // 定义文章的发布状态：
  let artState = "已发布";
  // 当点击了存为草稿按钮后  draft 草稿
  $(".btn-draft").on("click", function () {
    artState = "草稿";
  });

  // 监听提交表单的提交事件
  $("#form-pub").submit(function (e) {
    e.preventDefault();
    // 基于 form 表单，快速创建一个 FormData 对象
    let fd = new FormData(this);
    // 当前fd 收集到的表单数据并不完整  手动添加进去
    fd.append("state", artState);

    // 将裁剪后的图片，输出为文件
    $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append("cover_img", blob);
        $.ajax({
          type: "POST",
          url: "/my/article/add",
          data: fd,
          // 注意：如果向服务器提交的是 FormData 格式的数据，
          // 必须添加以下两个配置项
          contentType: false,
          processData: false,
          success: function (res) {
            if (res.status !== 0) return layer.msg(res.message);
            layer.msg(res.message);
            setTimeout(function () {
              location.href = "/home/article/artList.html";
            }, 1000);
          }
        });
      });
  });
});
